<script setup>
import { ref } from 'vue';
import IconFavorite from '@/components/icons/IconFavorite.vue';
import IconAdd from '@/components/icons/IconAdd.vue';
import IconSearch from '@/components/icons/IconSearch.vue';
import IconShare from '@/components/icons/IconShare.vue';
import IconComment from '@/components/icons/IconComment.vue';
import IconTag from '@/components/icons/IconTag.vue';
import dynamics from '@/assets/dynamics.json';

const rightItems = [{
    name: '收藏',
    icon: 'star-o',
    link: '/collection',
    svg: IconSearch
}, {
    name: '喜欢',
    icon: 'like-o',
    link: '/message',
    svg: IconAdd
}, {
    name: '我的',
    icon: 'manager-o',
    link: '/home/mine',
    svg: IconFavorite
}];
const first = dynamics[0];
console.log(dynamics);
const currentIndex = ref(0);
const tabActiveIndex = ref(0);
const tabInfos = [{ name: '热门', color: 'red' }, { name: '最新', color: 'blue' }, { name: '关注', color: 'green' }, { name: '推荐', color: 'yellow' }, { name: '精华', color: 'pink' }, { name: '校园', color: 'orange' }, { name: '问答', color: 'purple' }];
function parseTime(time) {
    let date = new Date(time);
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    return `${year}-${month}-${day}`;
}


</script>

<template>
    <div class="container flex flex-col">
        <div class="absolute h-32 w-full"
            style="background: rgb(0,160,234);
background: linear-gradient(180deg, rgba(0,160,234,0.49763655462184875) 11%, rgba(104,204,250,0.7553396358543417) 33%, rgba(104,204,250,0) 92%);">

        </div>

        <div class="header-new w-full h-16 bg-transparent flex justify-between z-10">
            <div class="flex  p-4 items-baseline">
                <div class=" w-20 text-center "
                    :class="(currentIndex == 0) ? 'text-3xl text-black font-semibold' : 'text-2xl text-gray-500 font-normal'"
                    @click="currentIndex = 0">校园
                </div>
                <div class="text-black w-20 text-center "
                    :class="(currentIndex == 1) ? 'text-3xl text-black font-semibold' : 'text-2xl text-gray-500 font-normal'"
                    @click="currentIndex = 1">问答
                </div>
            </div>
            <div class="flex space-4 items-center pt-2">
                <div class="right-new-item  w-11 " v-for="(item, index) in rightItems" :key="index">
                    <RouterLink :to="item.link">
                        <component :is="item.svg" />
                    </RouterLink>
                </div>
            </div>
        </div>
        <div class="scholl-container grow">
            <van-tabs v-model:active="tabActiveIndex" swipeable class="h-full" color="#00a0ea" swipe-threshold="4"
                :scrollspy=true background="transparent">
                <van-tab v-for="(item, index) in tabInfos" :title="item.name">
                    <div class="tab-content overflow-y-scroll pt-6"
                        style="background-color: {{ item.color }}; height: calc(100vh - 64px - 50px - 44px);">
                        <div v-for="(item, index) in dynamics" :key="index"
                            class="item-container p-4 ml-6 mr-6 mb-6 bg-gray-100 rounded-lg shadow-sm">
                            <div class="flex items-center">
                                <img :src=item.avatarUrl alt="" srcset="" class="w-8 h-8 rounded-full ">
                                <span class="ml-2">{{ item.userName }}</span>
                            </div>
                            <div class="text-base text-black text-bold mt-2">{{ item.title }}</div>
                            <div class="text-sm text-gray-700 text-pretty line-clamp-4 mt-1">{{ item.plainContent }}</div>
                            <div class="flex flex-start h8 mt-2">
                                <div v-for="(itemcircle, index) in item.circles" :key="index"
                                    class="bg-sky-300 rounded-full px-2 py-1  text-white mr-2 flex items-center">
                                    <IconTag class="w-3 h-3 rounded-full " />
                                    <span class="mx-1" style="font-size: 10px;">{{ itemcircle.circleTitle }}</span>
                                </div>
                            </div>
                            <div class="text-xs text-gray-500 mt-2">{{ parseTime(item.publishTime) }}</div>
                            <div class="flex mt-4 space-x-12">
                                <div class="h-8 flex-1 flex justify-center items-center">
                                    <IconShare class="h-full" />
                                    <div class="text-sm ml-1">{{ item.shareNum }}</div>
                                </div>
                                <div class="h-8 flex-1 flex justify-center items-center">
                                    <IconComment class="h-full" />
                                    <div class="text-sm ml-1">{{ item.commentNum }}</div>
                                </div>
                                <div class="h-8 flex-1 flex justify-center items-center">
                                    <IconFavorite class="h-full" />
                                    <div class="text-sm ml-1">{{ item.likeNum }}</div>
                                </div>
                            </div>
                        </div>

                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>


<style scoped>
.container {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}
</style>